

<template>
  <a-layout  class="layout-demo"  style="height: 400px;">
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>
      <a-space>
        <a-card :style="{ width: '360px' }" title="翻译文本">
          <template #extra>
            <a-button @click="sendText">翻译</a-button>
          </template>
          <a-textarea default-value="请输入需要翻译的内容" :auto-size="{
    minRows:10,
    maxRows:10
  }" v-model="text"/>
        </a-card>
        <a-card :style="{ width: '360px' }" title="翻译后的本文">
          <template #extra>
            <a-link>More</a-link>
          </template>
          <a-typography-paragraph>
          </a-typography-paragraph>
        </a-card>
      </a-space>
    </a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</template>
<script setup lang="ts">
import {ref} from "vue";
import axios from "axios";
import {getTranslate} from "@/api/translate/translate";
const text = ref('')
// function sendText(){
//   axios.post('/ollama', {text})
// }

async function sendText() {

  const response = await getTranslate(text.value)
  text.value = ''
  const readableStream = response.body;

  if (readableStream) {
    const reader = readableStream.getReader();
    let json
    let chunk = ''
    while (true) {
      const { value, done } = await reader.read();
      chunk = new TextDecoder().decode(value);
      if (done) {
        break;
      }
     console.log(chunk);
    }
  }
}
</script>
<style scoped>
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}


.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer) {
  height: 64px;
  background-color: var(--color-primary-light-4);
}

.layout-demo :deep(.arco-layout-sider) {
  width: 206px;
  background-color: var(--color-primary-light-3);
}

.layout-demo :deep(.arco-layout-content) {
  background-color: rgb(var(--arcoblue-6));
}
</style>